import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, Image, TouchableOpacity, ScrollView, Alert, Modal, StyleSheet, RefreshControl, Platform } from 'react-native';
import { Stack, useRouter, useFocusEffect } from 'expo-router';
import { Ionicons, MaterialIcons, FontAwesome5, FontAwesome } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useAppDispatch, useAppSelector } from '../store/hooks';
import { logoutUser, getCurrentUser } from '../store/userSlice';
import defaultAvatarImage from '../../assets/default_avatar.png';
import { launchImageLibraryAsync, requestMediaLibraryPermissionsAsync, MediaType } from 'expo-image-picker';
import { uploadAvatar, getUserStats, getFollowers } from '../services/userService';
import { useTheme } from '../context/ThemeContext';

// 定义类型
interface ClubData {
  name: string;
  members: number;
  color: string;
  icon: string;
}

interface UserEducation {
  grade: string;
  years: string;
  college: string;
  majorDetail: string;
  research: string;
  skills: string[];
}

interface UserStats {
  followers: number;
  following: number;
  posts: number;
  collections: number;
}

interface UserData {
  name: string;
  avatar: string;
  role: string;
  major: string;
  year: string;
  id: string;
  stats: UserStats;
  education: UserEducation;
  clubs: ClubData[];
}

interface SettingOption {
  title: string;
  icon: string;
  color: string;
  iconType: 'fontawesome' | 'fontawesome5' | 'ionicons';
}

export default function ProfileScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { currentUser, loading } = useAppSelector(state => state.user);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalMessage, setModalMessage] = useState('');
  const [avatarError, setAvatarError] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [actualFollowerCount, setActualFollowerCount] = useState(0);
  const [followersChecked, setFollowersChecked] = useState(false);
  
  // 使用全局主题上下文
  const { isDarkMode, toggleTheme } = useTheme();
  
  // 用户统计数据状态
  const [statsData, setStatsData] = useState<UserStats>({
    followers: 0,
    following: 0,
    posts: 0,
    collections: 0
  });
  
  // 获取用户统计数据
  const fetchUserStats = async () => {
    // 检查用户是否已登录
    if (!currentUser) {
      return;
    }
    
    try {
      const response = await getUserStats();
      if (response && response.data) {
        // 如果粉丝列表已经检查过，使用实际的粉丝数
        const followerCount = followersChecked ? actualFollowerCount : response.data.followersCount || 0;
        
        setStatsData({
          followers: followerCount,
          following: response.data.followingCount || 0,
          posts: response.data.postsCount || 0,
          collections: response.data.favourCount || 0
        });
      }
    } catch (error: any) {
      console.error('获取用户统计数据失败:', error.message);
    }
  };
  
  // 获取实际粉丝数量
  const fetchActualFollowerCount = async () => {
    if (!currentUser) {
      return;
    }
    
    try {
      const response = await getFollowers({ current: 1, pageSize: 1 });
      if (response && response.data) {
        // 使用API返回的总数量
        setActualFollowerCount(response.data.total || 0);
        setFollowersChecked(true);
        
        // 更新统计数据中的粉丝数
        setStatsData(prev => ({
          ...prev,
          followers: response.data.total || 0
        }));
      }
    } catch (error: any) {
      console.error('获取实际粉丝数量失败:', error.message);
    }
  };
  
  // 确保用户数据已加载
  useEffect(() => {
    if (!currentUser) {
      dispatch(getCurrentUser());
    }
    
    // 加载用户统计数据
    // 只有当用户已登录时才获取统计数据
    if (currentUser) {
      fetchUserStats();
    }
  }, [dispatch, currentUser]);
  
  // 每次屏幕获得焦点时检查粉丝数量
  useFocusEffect(
    useCallback(() => {
      if (currentUser) {
        fetchActualFollowerCount();
      }
      return () => {
        // 清理函数
      };
    }, [currentUser])
  );
  
  // 处理下拉刷新
  const onRefresh = () => {
    // 检查用户是否已登录
    if (!currentUser) {
      setRefreshing(false);
      return;
    }
    
    setRefreshing(true);
    // 刷新用户数据
    Promise.all([
      dispatch(getCurrentUser()).unwrap(),
      fetchActualFollowerCount(),
      fetchUserStats()
    ])
      .then(() => {
        setRefreshing(false);
      })
      .catch((error) => {
        setRefreshing(false);
        Alert.alert('刷新失败', error?.message || '请检查网络连接');
      });
  };
  
  const clubsData: ClubData[] = [
    { name: '编程俱乐部', members: 78, color: '#FFE0E0', icon: 'code' },
    { name: '棋牌社', members: 45, color: '#FFF4D8', icon: 'chess' },
    { name: '篮球社', members: 32, color: '#E0FFE9', icon: 'basketball-ball' }
  ];
  
  // 生成用户技能列表
  const getSkillsList = (): string[] => {
    if (!currentUser?.skills) return ['Python', 'Java', '前端开发', '机器学习'];
    return currentUser.skills.split(',');
  };

  // 设置选项列表
  const settingOptions: SettingOption[] = [
    { title: '消息通知', icon: 'bell', color: '#E0E9FF', iconType: 'fontawesome5' },
    { title: '隐私设置', icon: 'shield-alt', color: '#F2E0FF', iconType: 'fontawesome5' },
    { title: '我的收藏', icon: 'bookmark', color: '#FFEFCF', iconType: 'fontawesome5' },
    { title: '浏览历史', icon: 'history', color: '#E0FFE9', iconType: 'fontawesome5' },
    { title: '帮助与反馈', icon: 'question-circle', color: '#FFE0E0', iconType: 'fontawesome5' }
  ];

  // 显示"功能开发中"的弹窗
  const showDevelopingModal = (feature: string): void => {
    setModalMessage(`${feature}功能正在开发中，敬请期待！`);
    setModalVisible(true);
  };
  
  // 处理设置选项点击
  const handleSettingOptionClick = (option: SettingOption): void => {
    switch (option.title) {
      case '帮助与反馈':
        router.push('/helpAndFeedback' as any);
        break;
      case '我的收藏':
        router.push('/favorites' as any);
        break;
      case '浏览历史':
        router.push('/browsingHistory' as any);
        break;
      default:
        showDevelopingModal(option.title);
        break;
    }
  };
  
  // 更新并上传头像
  const handleUpdateAvatar = async () => {
    try {
      // 请求相册访问权限
      const { status } = await requestMediaLibraryPermissionsAsync();
      
      if (status !== 'granted') {
        setModalMessage('需要访问相册的权限才能更换头像');
        setModalVisible(true);
        return;
      }
      
      // 打开相册选择图片
      const result = await launchImageLibraryAsync({
        mediaTypes: 'images',
        allowsEditing: true,
        aspect: [1, 1],
        quality: 0.8,
      });
      
      if (!result.canceled && result.assets && result.assets.length > 0) {
        const selectedImage = result.assets[0];
        
        setRefreshing(true);
        
        // 创建FormData对象
        const formData = new FormData();
        
        // 获取文件扩展名
        const fileExt = selectedImage.uri.split('.').pop() || 'jpg';
        
        // 添加文件到FormData
        formData.append('file', {
          uri: Platform.OS === 'ios' ? selectedImage.uri.replace('file://', '') : selectedImage.uri,
          name: `avatar.${fileExt}`,
          type: `image/${fileExt === 'jpg' ? 'jpeg' : fileExt}`,
        } as any);
        
        try {
          // 调用上传API
          const response = await uploadAvatar(formData);
          
          if (response && response.data) {
            // 显示成功消息
            setModalMessage('头像更新成功！');
            setModalVisible(true);
            setAvatarError(false);
            
            // 重新获取用户信息，更新Redux状态
            dispatch(getCurrentUser());
          } else {
            setModalMessage('头像上传失败：服务器没有返回有效的头像URL');
            setModalVisible(true);
          }
        } catch (error: any) {
          setModalMessage(`头像上传失败: ${error.message || '上传过程中出现错误'}`);
          setModalVisible(true);
        } finally {
          setRefreshing(false);
        }
      }
    } catch (error: any) {
      setModalMessage(`头像上传失败: ${error.message || '上传过程中出现错误'}`);
      setModalVisible(true);
      setRefreshing(false);
    }
  };
  
  // 导航到编辑个人资料页
  const navigateToEditProfile = () => {
    router.push('/profile/edit');
  };

  // 处理退出登录
  const handleLogout = () => {
    Alert.alert(
      '退出登录',
      '确定要退出当前账号吗？',
      [
        {
          text: '取消',
          style: 'cancel'
        },
        {
          text: '确定',
          onPress: () => {
            // 显示加载中
            dispatch(logoutUser())
              .unwrap()
              .then(() => {
                // 退出成功，跳转到登录页面
                router.replace('/login');
              })
              .catch((error) => {
                // 退出失败，显示错误信息
                Alert.alert('退出失败', error);
              });
          }
        }
      ]
    );
  };
  
  // 默认头像URL
  const defaultAvatar = Image.resolveAssetSource(defaultAvatarImage).uri;

  // 渲染图标
  const renderIcon = (iconName: string, iconType: 'fontawesome' | 'fontawesome5' | 'ionicons', bgColor: string) => {
    const iconStyle = { padding: 8, borderRadius: 10, backgroundColor: bgColor };
    
    if (iconType === 'fontawesome') {
      return (
        <View style={iconStyle}>
          <FontAwesome name={iconName as any} size={20} color="#666" />
        </View>
      );
    } else if (iconType === 'fontawesome5') {
      return (
        <View style={iconStyle}>
          <FontAwesome5 name={iconName} size={20} color="#666" />
        </View>
      );
    }
    
    return (
      <View style={iconStyle}>
        <Ionicons name={iconName as any} size={20} color="#666" />
      </View>
    );
  };

  // 处理统计项点击
  const handleStatItemClick = (type: string) => {
    switch (type) {
      case 'followers':
        router.push('/profile/followers' as any);
        break;
      case 'following':
        router.push('/profile/followings' as any);
        break;
      case 'posts':
      case 'collections':
        showDevelopingModal(`${type === 'posts' ? '我的帖子' : '我的收藏'}功能`);
        break;
      default:
        break;
    }
  };

  // 加载中时显示加载状态
  if (loading || !currentUser) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>加载中...</Text>
      </View>
    );
  }

  // 渲染页面内容
  return (
    <>
      <Stack.Screen 
        options={{ 
          title: '我的',
          headerStyle: {
            backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF',
          },
          headerTintColor: isDarkMode ? '#FFFFFF' : '#333333',
          headerRight: () => (
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <TouchableOpacity 
                onPress={toggleTheme}
                style={{ marginRight: 15 }}
              >
                {isDarkMode ? (
                  <Ionicons name="sunny" size={24} color={isDarkMode ? '#FFFFFF' : '#666666'} />
                ) : (
                  <Ionicons name="moon" size={24} color={isDarkMode ? '#FFFFFF' : '#666666'} />
                )}
              </TouchableOpacity>
              <TouchableOpacity 
                onPress={() => showDevelopingModal('设置')}
                style={{ marginRight: 15 }}
              >
                <Ionicons name="settings-outline" size={24} color={isDarkMode ? '#FFFFFF' : '#666666'} />
              </TouchableOpacity>
            </View>
          )
        }} 
      />
      
      <ScrollView 
        style={{ flex: 1, backgroundColor: isDarkMode ? '#121212' : '#F5F5F5' }}
        contentContainerStyle={{ paddingBottom: 20 }}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={['#1677FF']}
            tintColor={isDarkMode ? '#5DADE2' : '#1677FF'}
            title="刷新中..."
            titleColor={isDarkMode ? '#AAAAAA' : '#999999'}
          />
        }
      >
        {/* 用户基本信息卡片 */}
        <View style={[styles.card, isDarkMode && styles.darkCard]}>
          <View style={styles.userInfoContainer}>
            <View style={styles.avatarContainer}>
              <Image 
                source={{ uri: avatarError ? defaultAvatar : (currentUser.userAvatar || defaultAvatar) }}
                style={styles.avatar}
                onError={() => setAvatarError(true)}
              />
              <View 
                style={[
                  styles.genderIconContainer, 
                  { backgroundColor: currentUser.gender === 'male' ? '#5DADE2' : '#FF69B4' }
                ]}
              >
                <FontAwesome5 
                  name={currentUser.gender === 'male' ? 'mars' : 'venus'} 
                  size={14} 
                  color="#FFF" 
                />
              </View>
            </View>
            
            <View style={styles.userInfo}>
              <View style={styles.nameContainer}>
                <Text style={[styles.name, isDarkMode && styles.darkText]}>{currentUser.nickname || currentUser.userName}</Text>
                <View style={styles.roleTag}>
                  <Text style={styles.roleText}>{currentUser.userRole === 'admin' ? '管理员' : '学生'}</Text>
                </View>
              </View>
              
              <Text style={[styles.majorText, isDarkMode && styles.darkSubText]}>
                {currentUser.major || '未设置专业'} • {currentUser.grade || '未设置年级'}
              </Text>
              
              <Text style={[styles.idText, isDarkMode && styles.darkSubText]}>学号: {currentUser.studentId || currentUser.id}</Text>
            </View>
          </View>
          
          {/* 统计数据 */}
          <View style={[styles.statsContainer, isDarkMode && { borderColor: '#2D2D2D' }]}>
            <TouchableOpacity 
              style={styles.statItem}
              onPress={() => handleStatItemClick('followers')}
            >
              <Text style={[styles.statNumber, isDarkMode && styles.darkText]}>{statsData.followers}</Text>
              <Text style={[styles.statLabel, isDarkMode && styles.darkSubText]}>粉丝</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.statItem}
              onPress={() => handleStatItemClick('following')}
            >
              <Text style={[styles.statNumber, isDarkMode && styles.darkText]}>{statsData.following}</Text>
              <Text style={[styles.statLabel, isDarkMode && styles.darkSubText]}>关注</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.statItem}
              onPress={() => handleStatItemClick('posts')}
            >
              <Text style={[styles.statNumber, isDarkMode && styles.darkText]}>{statsData.posts}</Text>
              <Text style={[styles.statLabel, isDarkMode && styles.darkSubText]}>帖子</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.statItem}
              onPress={() => handleStatItemClick('collections')}
            >
              <Text style={[styles.statNumber, isDarkMode && styles.darkText]}>{statsData.collections}</Text>
              <Text style={[styles.statLabel, isDarkMode && styles.darkSubText]}>收藏</Text>
            </TouchableOpacity>
          </View>
          
          {/* 编辑个人资料按钮 - 保持蓝色 */}
          <TouchableOpacity 
            style={styles.editButton}
            onPress={navigateToEditProfile}
          >
            <Text style={styles.editButtonText}>编辑个人资料</Text>
          </TouchableOpacity>
        </View>
        
        {/* 学术信息卡片 */}
        <View style={[styles.card, isDarkMode && styles.darkCard]}>
          <Text style={[styles.sectionTitle, isDarkMode && styles.darkText]}>学术信息</Text>
          
          <View style={styles.infoItem}>
            {renderIcon('school', 'fontawesome5', '#E0E9FF')}
            <View style={styles.infoContent}>
              <Text style={[styles.infoTitle, isDarkMode && styles.darkText]}>{currentUser.grade || '未设置年级'}</Text>
              <Text style={[styles.infoSubtitle, isDarkMode && styles.darkSubText]}>{currentUser.createTime ? new Date(currentUser.createTime).getFullYear() : '未知'}-至今</Text>
            </View>
          </View>
          
          <View style={styles.infoItem}>
            {renderIcon('building', 'fontawesome5', '#E0FFE9')}
            <View style={styles.infoContent}>
              <Text style={[styles.infoTitle, isDarkMode && styles.darkText]}>{currentUser.college || '未设置学院'}</Text>
              <Text style={[styles.infoSubtitle, isDarkMode && styles.darkSubText]}>{currentUser.major || '未设置专业'}</Text>
            </View>
          </View>
          
          <View style={styles.infoItem}>
            {renderIcon('lightbulb', 'fontawesome5', '#FFF4D8')}
            <View style={styles.infoContent}>
              <Text style={[styles.infoTitle, isDarkMode && styles.darkText]}>研究方向</Text>
              <Text style={[styles.infoSubtitle, isDarkMode && styles.darkSubText]}>{currentUser.researchDirection || '未设置研究方向'}</Text>
            </View>
          </View>
          
          <View style={styles.infoItem}>
            {renderIcon('laptop', 'fontawesome5', '#F2E0FF')}
            <View style={styles.infoContent}>
              <Text style={[styles.infoTitle, isDarkMode && styles.darkText]}>专业技能</Text>
              <View style={styles.skillsContainer}>
                {getSkillsList().map((skill, index) => (
                  <Text key={index} style={styles.skillText}>{skill}</Text>
                ))}
              </View>
            </View>
          </View>
        </View>
        
        {/* 已加入社团 */}
        <View style={[styles.card, isDarkMode && styles.darkCard]}>
          <View style={styles.sectionHeader}>
            <Text style={[styles.sectionTitle, isDarkMode && styles.darkText]}>已加入社团</Text>
            <TouchableOpacity onPress={() => showDevelopingModal('查看全部社团')}>
              <Text style={styles.viewAllText}>查看全部</Text>
            </TouchableOpacity>
          </View>
          
          {clubsData.map((club, index) => (
            <View key={index} style={styles.clubItem}>
              <View style={[styles.clubIcon, { backgroundColor: club.color }]}>
                <FontAwesome5 name={club.icon} size={20} color="#666" />
              </View>
              <View style={styles.clubInfo}>
                <Text style={[styles.clubName, isDarkMode && styles.darkText]}>{club.name}</Text>
                <Text style={[styles.clubMembers, isDarkMode && styles.darkSubText]}>成员: {club.members}人</Text>
              </View>
              {index === 0 ? (
                <TouchableOpacity 
                  style={styles.techLeadButton}
                  onPress={() => showDevelopingModal('技术主管')}
                >
                  <Text style={styles.techLeadText}>技术主管</Text>
                </TouchableOpacity>
              ) : (
                <Text style={[styles.memberText, isDarkMode && styles.darkSubText]}>成员</Text>
              )}
            </View>
          ))}
        </View>
        
        {/* 设置选项 */}
        <View style={[styles.card, isDarkMode && styles.darkCard]}>
          {settingOptions.map((option, index) => (
            <TouchableOpacity 
              key={index}
              style={[styles.settingItem, isDarkMode && { borderBottomColor: '#2D2D2D' }]}
              onPress={() => handleSettingOptionClick(option)}
            >
              {renderIcon(option.icon, option.iconType, option.color)}
              <Text style={[styles.settingText, isDarkMode && styles.darkText]}>{option.title}</Text>
              <Ionicons name="chevron-forward" size={20} color={isDarkMode ? '#555' : '#CCC'} />
            </TouchableOpacity>
          ))}
        </View>
        
        {/* 退出登录按钮 */}
        <TouchableOpacity 
          style={[styles.logoutButton, isDarkMode && { borderColor: '#FF6B6B' }]}
          onPress={handleLogout}
          disabled={loading}
        >
          <Text style={styles.logoutText}>退出登录</Text>
        </TouchableOpacity>
      </ScrollView>
      
      {/* 开发中弹窗 */}
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={[styles.modalContent, isDarkMode && { backgroundColor: '#2D2D2D' }]}>
            <Text style={[styles.modalText, isDarkMode && styles.darkText]}>{modalMessage}</Text>
            <TouchableOpacity 
              style={styles.modalButton}
              onPress={() => setModalVisible(false)}
            >
              <Text style={styles.modalButtonText}>我知道了</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </>
  );
} 

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginHorizontal: 16,
    marginTop: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  userInfoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  avatarContainer: {
    position: 'relative',
  },
  avatar: {
    width: 70,
    height: 70,
    borderRadius: 35,
    marginRight: 16,
  },
  genderIconContainer: {
    position: 'absolute',
    bottom: 0,
    right: 16,
    width: 24,
    height: 24,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#FFFFFF',
  },
  userInfo: {
    flex: 1,
  },
  nameContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
    marginRight: 8,
    color: '#333',
  },
  roleTag: {
    backgroundColor: '#E0F0FF',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
  },
  roleText: {
    fontSize: 12,
    color: '#1677FF',
  },
  majorText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4,
  },
  idText: {
    fontSize: 13,
    color: '#999',
    marginTop: 4,
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderTopWidth: 1,
    borderColor: '#F0F0F0',
  },
  statItem: {
    alignItems: 'center',
    flex: 1,
  },
  statNumber: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
    color: '#333',
  },
  statLabel: {
    fontSize: 12,
    color: '#666',
  },
  editButton: {
    backgroundColor: '#1677FF',
    borderRadius: 8,
    padding: 12,
    alignItems: 'center',
    marginTop: 16,
  },
  editButtonText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    fontSize: 16,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#333',
  },
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  viewAllText: {
    fontSize: 14,
    color: '#1677FF',
  },
  infoItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  infoContent: {
    marginLeft: 12,
    flex: 1,
  },
  infoTitle: {
    fontSize: 15,
    fontWeight: '500',
    marginBottom: 2,
    color: '#333',
  },
  infoSubtitle: {
    fontSize: 13,
    color: '#666',
  },
  skillsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 4,
  },
  skillText: {
    color: '#1677FF',
    backgroundColor: '#E0F0FF',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
    marginRight: 8,
    marginBottom: 8,
    fontSize: 12,
  },
  clubItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  clubIcon: {
    width: 40,
    height: 40,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  clubInfo: {
    flex: 1,
  },
  clubName: {
    fontSize: 15,
    fontWeight: '500',
    marginBottom: 2,
    color: '#333',
  },
  clubMembers: {
    fontSize: 12,
    color: '#999',
  },
  techLeadButton: {
    backgroundColor: '#E0F0FF',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 4,
  },
  techLeadText: {
    color: '#1677FF',
    fontSize: 12,
  },
  memberText: {
    color: '#999',
    fontSize: 13,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#F5F5F5',
  },
  settingText: {
    flex: 1,
    fontSize: 15,
    color: '#333',
    marginLeft: 12,
  },
  logoutButton: {
    margin: 16,
    padding: 12,
    borderWidth: 1,
    borderColor: '#FF4D4F',
    borderRadius: 8,
    alignItems: 'center',
  },
  logoutText: {
    color: '#FF4D4F',
    fontSize: 16,
    fontWeight: '500',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 24,
    width: '80%',
    alignItems: 'center',
  },
  modalText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#333',
    marginBottom: 20,
  },
  modalButton: {
    backgroundColor: '#1677FF',
    paddingVertical: 10,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  modalButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '500',
  },
  // 深色模式样式
  darkCard: {
    backgroundColor: '#1E1E1E',
    shadowColor: '#000',
  },
  darkText: {
    color: '#FFFFFF',
  },
  darkSubText: {
    color: '#AAAAAA',
  },
}); 